import React, {Component} from 'react';
import {
  DeviceInfo,
  SafeAreaView,
  StyleSheet,
  View,
  StatusBar,
  ViewPropTypes,
} from 'react-native';
import {PropTypes} from 'prop-types';

export default class SafeAreaViewPlus extends Component {
  static propTypes = {
    ...ViewPropTypes,
    topColor: PropTypes.string,
    bottomColor: PropTypes.string,
    enablePlus: PropTypes.bool,
    topInset: PropTypes.bool,
    bottomInset: PropTypes.bool,
  };

  static defaultProps = {
    topColor: '#fff',
    bottomColor: '#fff',
    enablePlus: true,
    topInset: true,
    bottomInset: true,
  };

  genSafeAreaViewPlus() {
    const {children, topColor, bottomColor, topInset, bottomInset} = this.props;
    return (
      <View style={[styles.container, this.props.style]}>
        <StatusBar backgroundColor="#fff" barStyle="dark-content" />
        {this.getTopArea(topColor, topInset)}
        <View style={{
          display: 'flex',
          flex: 1,
          flexDirection: 'column',
        }}>
          {children}
        </View>
        {this.getBottomArea(bottomColor, bottomInset)}
      </View>
    );
  }

  genSafeAreaView() {
    return (
      <SafeAreaView
        style={[styles.container, this.props.style]}
        {...this.props}>
        {this.props.children}
      </SafeAreaView>
    );
  }

  getTopArea(topColor, topInset) {
    return !DeviceInfo.isIPhoneX_deprecated || !topInset ? null : (
      <View
        style={{
          ...styles.topArea,
          backgroundColor: topColor,
        }}
      />
    );
  }

  getBottomArea(bottomColor, bottomInset) {
    return !DeviceInfo.isIPhoneX_deprecated || !bottomInset ? null : (
      <View
        style={{
          ...styles.bottomArea,
          backgroundColor: bottomColor,
        }}
      />
    );
  }

  render() {
    const {enablePlus} = this.props;
    return enablePlus ? this.genSafeAreaViewPlus() : this.genSafeAreaView();
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex'
  },
  topArea: {
    height: 44,
  },
  bottomArea: {
    height: 34,
  },
});
